<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        },
        chartData: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    data () {
        return {
            chart: null,
            selfChartData: {}
        }
    },
    mounted () {
        this.selfChartData = JSON.parse(JSON.stringify(this.chartData))
        this.initChart()
    },
    watch: {
        chartData (nVal) {
            this.chart.clear()
            this.selfChartData = JSON.parse(JSON.stringify(nVal))
            this.selfSetOption()
        }
    },
    beforeDestroy () {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart () {
            this.chart = echarts.init(document.getElementById(this.id));
            this.selfSetOption();
        },
        selfSetOption () {
            this.chart.setOption({
                title: {
                    textStyle: {
                        fontWeight: "bold",
                        fontSize: 18,
                        color: this.selfScss.titleColor,
                    },
                    left: "center",
                },
                legend: {
                    icon: "circle",
                    orient: "vertical",
                    type: "scroll",
                    top: "3%",
                    left: "81%",
                    itemWidth: 8,
                    itemGap: 15,
                    textStyle: {
                        color: "#67729d",
                    },
                    selector: [
                        {
                            type: 'all',
                            // 可以是任意你喜欢的 title
                            title: '全选'
                        },
                        {
                            type: 'inverse',
                            title: '反选'
                        }
                    ],
                },
                tooltip: {
                    enterable: true,
                    confine: true,
                    trigger: "axis",
                    axisPointer: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    textStyle: {
                        fontSize: '10'
                    },
                    formatter: function (arr) {
                        let time = arr[0].name
                        let str = `
                        <div style="margin-bottom:10px;">${time}</div>
                        `;
                        arr.forEach(item => {
                            str += `<div style="margin-bottom:10px">
                            <div style="${item.data.status == '1' ? 'color:#F56C6C' : ''}">${item.marker}${item.seriesName}</div>
                            <div style="display:flex;justify-content:space-between">
                                <span>变化趋势：${item.data.trendVal}</span>
                                <span style="font-weight:bold">数据值：${item.data.value}</span>
                            </div>
                            </div>`
                        })
                        let res = `<div style="max-height:400px;width:300px;overflow:auto;padding-right:10px;">${str}</div>`
                        return res;
                    },
                },
                grid: {
                    top: "5%",
                    left: "5%",
                    right: "20%",
                    bottom: "20%"
                },
                xAxis: {
                    data: this.chartData.xAxis
                },
                yAxis: [{
                    type: 'value',
                    splitLine: {
                        show: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#90979c'
                        }
                    },
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                    },
                    splitArea: {
                        show: true
                    }
                }],
                dataZoom: [
                    {
                        show: true,
                        height: 15,
                        xAxisIndex: [
                            0
                        ],
                        handleStyle: {
                            color: '#d3dee5'
                        },
                        borderColor: '#90979c'

                    },
                    {
                        type: 'inside',
                        show: true,
                        height: 15,
                        start: 1,
                        end: 35
                    }
                ],
                series: this.chartData.series
            }
            );
        }
    }
}
</script>
